Skip to content

Reimplement GWT assay plate designer in React#7623

Open
labkey-jeckels wants to merge 11 commits intodevelopfrom
fb_reactPlateDesigner
Open

Reimplement GWT assay plate designer in React#7623
labkey-jeckels wants to merge 11 commits intodevelopfrom
fb_reactPlateDesigner

Conversation

@labkey-jeckels
Copy link
Copy Markdown
Contributor

@labkey-jeckels labkey-jeckels commented Apr 27, 2026 •
edited by labkey-nicka
Loading

Rationale

Our assay plate designer is our final GWT UI. This replaces it with a React-based version.

Related Pull Requests

Changes

  • New React app that matches the GWT version 1:1
  • Improve generics in PlateManager and related callers

Tasks 📍

  • Code review @labkey-nicka
  • Manual Testing @labkey-tchad
  • Update existing Selenium tests (NAb and Elispot)
  • Add unit tests
  • Add endpoint tests

@labkey-jeckels labkey-jeckels self-assigned this Apr 27, 2026
This was referenced Apr 27, 2026
Open
Open
@labkey-adam
Copy link
Copy Markdown
Contributor

labkey-adam commented Apr 27, 2026

👍

labkey-alan
labkey-alan requested changes Apr 27, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@labkey-alan labkey-alan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did not do the most thorough review on the React code, since I was only asked to take a cursory look at the code, and the GitHub outage is preventing me from viewing all of the files at this time. I do have two pieces of feedback though:

  1. Many of the components have really large chunks of TSX code (e.g. GroupTypesPanel). Lots of nested loops and conditional statements. This is a readability mess, and it also makes it significantly harder to test, since we can't test in smaller units of functionality. My recommendation is to split these large chunks of TSX into smaller components.
  2. There are zero unit tests. For a set of components this size, and this complex, we really should have as much unit test coverage as is reasonable.

Additionally I do have a concern about introducing this code more generally. While I understand the motivation to get rid of the last GWT component, and I would love to see us accomplish that goal, I am not sure that this is the best path forward. We already have a lot of plate related code in our apps, and while this code helps us get rid of GWT, it does not change the fact that we have two different implementations of a UI that is meant to accomplish the same thing. I think we would benefit most from having one UI for our plate code, not two different implementations that are both made with React.

I can take a more thorough look at the code later if wanted.

@labkey-jeckels
Copy link
Copy Markdown
Contributor Author

labkey-jeckels commented Apr 28, 2026 

---------------------------------------------|---------|----------|---------|---------|------------------------------------------------------------------------------------------------
File                                         | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                                                                              
---------------------------------------------|---------|----------|---------|---------|------------------------------------------------------------------------------------------------
All files                                    |   73.37 |    74.48 |   68.29 |   76.86 |                                                                                                
 src/client/PlateTemplateDesigner            |   47.63 |    39.39 |   29.57 |   53.49 |                                                                                                
  PlateTemplateDesigner.tsx                  |   43.22 |    33.33 |   28.57 |   48.86 | ...283,287-289,293-301,305-319,324,328-329,339-346,352-365,370-377,382,386-387,393-395,416-418 
  models.ts                                  |     100 |      100 |     100 |     100 |                                                                                                
 src/client/PlateTemplateDesigner/components |   98.35 |    96.65 |   97.84 |    99.2 |                                                                                                
  GroupTypesPanel.tsx                        |   96.62 |    95.18 |   94.28 |   97.29 | 280,329                                                                                        
  MultiCreateDialog.tsx                      |   98.36 |    94.11 |     100 |     100 | 24,35                                                                                          
  RightPanel.tsx                             |     100 |      100 |     100 |     100 |                                                                                                
  ShiftPanel.tsx                             |     100 |      100 |     100 |     100 |                                                                                                
  StatusBar.tsx                              |     100 |      100 |     100 |     100 |                                                                                                
  TemplateGrid.tsx                           |     100 |      100 |     100 |     100 |                                                                                                
  WarningPanel.tsx                           |     100 |      100 |     100 |     100 |                                                                                                
  WellGroupProperties.tsx                    |   95.83 |    92.85 |     100 |     100 | 46                                                                                             
 test/js                                     |     100 |      100 |     100 |     100 |                                                                                                
  fileMock.js                                |     100 |      100 |     100 |     100 |                                                                                                
---------------------------------------------|---------|----------|---------|---------|------------------------------------------------------------------------------------------------

@labkey-jeckels labkey-jeckels mentioned this pull request Apr 28, 2026
Open
labkey-nicka
labkey-nicka reviewed Apr 28, 2026
View reviewed changes
Comment thread assay/src/org/labkey/assay/PlateController.java Outdated
Comment thread assay/src/org/labkey/assay/PlateController.java Outdated
Comment thread assay/src/org/labkey/assay/PlateController.java Outdated
Comment thread assay/src/org/labkey/assay/PlateController.java Outdated
@labkey-jeckels
Copy link
Copy Markdown
Contributor Author

labkey-jeckels commented Apr 29, 2026

I did not do the most thorough review on the React code, since I was only asked to take a cursory look at the code, and the GitHub outage is preventing me from viewing all of the files at this time. I do have two pieces of feedback though:

  1. Many of the components have really large chunks of TSX code (e.g. GroupTypesPanel). Lots of nested loops and conditional statements. This is a readability mess, and it also makes it significantly harder to test, since we can't test in smaller units of functionality. My recommendation is to split these large chunks of TSX into smaller components.
  2. There are zero unit tests. For a set of components this size, and this complex, we really should have as much unit test coverage as is reasonable.

Additionally I do have a concern about introducing this code more generally. While I understand the motivation to get rid of the last GWT component, and I would love to see us accomplish that goal, I am not sure that this is the best path forward. We already have a lot of plate related code in our apps, and while this code helps us get rid of GWT, it does not change the fact that we have two different implementations of a UI that is meant to accomplish the same thing. I think we would benefit most from having one UI for our plate code, not two different implementations that are both made with React.

I can take a more thorough look at the code later if wanted.

  1. Refactored. See what you think now.
  2. Significant unit testing added, along with endpoint testing (with help from Nick).

labkey-nicka
labkey-nicka approved these changes Apr 29, 2026
View reviewed changes
Comment thread assay/src/org/labkey/assay/PlateController.java
{
if (form.getPlateType() == null)
errors.reject(ERROR_REQUIRED, "Plate \"plateType\" is required.");
if (form.getGroups() != null)
Copy link
Copy Markdown
Contributor

@labkey-nicka labkey-nicka Apr 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's be sure to get a passing run in the LKB suite and LKB endpoint suite since those cover the plate tests.

Comment thread assay/src/org/labkey/assay/PlateController.java
private boolean _template;
private Long _templateId;

// Template designer fields (groups path)
Copy link
Copy Markdown
Contributor

@labkey-nicka labkey-nicka Apr 29, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Alternatively, and as you may have considered, could have a new class SaveDesignerTemplateForm that extends CreatePlateForm and encapsulates the template designer specific modeling.

@labkey-tchad
Copy link
Copy Markdown
Member

labkey-tchad commented Apr 29, 2026

Manual testing looks mostly good. Just some problems with the buttons at the top.

  • The "Save & Close" and "Cancel" buttons trigger a dirty page alert if there are changes.
  • The "Save & Close" button is enabled when there aren't any changes
  • None of the buttons match existing LabKey button styling

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@labkey-alan labkey-alan labkey-alan requested changes

@labkey-nicka labkey-nicka labkey-nicka approved these changes

@labkey-klum labkey-klum Awaiting requested review from labkey-klum

Requested changes must be addressed to merge this pull request.

Assignees

@labkey-jeckels labkey-jeckels

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@labkey-jeckels @labkey-adam @labkey-tchad @labkey-nicka @labkey-alan